<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="6" :sm="8">
            <a-form-item label="成果编号">
              <a-input placeholder="请填写成果编号" v-model="queryParam.cxj_xmbh"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="成果名称">
              <a-input placeholder="请填写成果名称" v-model="queryParam.cxj_mc_zw"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="申报单位">
              <a-input placeholder="请填写申报单位" v-model="queryParam.sbdw_qymc"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="成果类别">
              <a-select v-model="queryParam.fl_bh" placeholder="请选择成果类别">
                <a-select-option v-for="(item, index) in cxjSbList" :key="index"
                  :value="item.fl_bh">{{ item.fl_mc }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="推荐状态">
              <a-select v-model="queryParam.tjzt" placeholder="请选择推荐状态">
                <a-select-option value="">请选择</a-select-option>
                <a-select-option value="200">待推荐</a-select-option>
                <a-select-option value="203">已推荐</a-select-option>
                <a-select-option value="202">不推荐</a-select-option>
                <a-select-option value="201">退回修改</a-select-option>
                <a-select-option value="204">退回修改已提交</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="推荐单位类别">
              <!-- <a-select v-model="queryParam.fl_bh" placeholder="请选择推荐单位类别">
                          <a-select-option value="">请选择</a-select-option>
                        </a-select> -->
              <a-select v-model="queryParam.tjdwlb" placeholder="请选择推荐单位类别" @change="handleTjdwlb">
                <a-select-option v-for="recommender in recommenderTypeData" :key="recommender.jttjdw_lbmc"
                  :value="recommender.jttjdw_lbbh">
                  {{ recommender.jttjdw_lbmc }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="推荐单位">
              <!-- <a-select v-model="queryParam.tjdw" placeholder="请选择推荐单位">
                                <a-select-option value="">请选择</a-select-option>
                            </a-select> -->
              <a-select v-model="queryParam.tjdwid" placeholder="请选择推荐单位">
                <a-select-option v-for="item in recommenderData" :key="item.id" :value="item.id">
                  {{ item.jttjdw_mc }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="所属集团">
              <!-- <a-select v-model="queryParam.tjdw" placeholder="请选择所属集团">
                                <a-select-option value="">请选择</a-select-option>
                            </a-select> -->
              <a-select v-model="queryParam.ssjt" placeholder="请选择所属集团">
                <a-select-option v-for="group in groupData" :key="group.jttjdwMc" :value="group.id">
                  {{ group.jttjdwMc }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="申报状态">
              <a-select v-model="queryParam.sbzt" placeholder="请选择申报状态">
                <a-select-option value="">请选择</a-select-option>
                <a-select-option value="100">材料填写中</a-select-option>
                <a-select-option value="101">材料已确认</a-select-option>
                <a-select-option value="102">已提交申报</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="年份">
              <a-date-picker style="width: 100%" mode="year" v-model="queryParam.sbnd" format="YYYY" :open='yearShowOne'
                @openChange="openChangeOne" @panelChange="onYearChange" placeholder="请选择年份" />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>
          <!-- <a-col :md="12" :sm="12">
                        <a-space :size="10">
                            <span>{{year}}年度电力创新奖项目推荐表，当前状态：未上传</span>
                            <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
                                <a-button type="primary" icon="upload">上传</a-button>
                            </a-upload>
                            <a-button type="primary" icon="download" @click="handleExportXls('推荐表')">导出Excel</a-button>
                        </a-space>
                    </a-col>
                    <a-col :md="18" :sm="16">
                        <span style="float: right;overflow: hidden;" class="table-page-search-submitButtons">
                            <a-button type="primary" icon="download" @click="exportTjcgXls">推荐成果汇总表下载</a-button>
                            <a-button type="primary" icon="upload" style="margin-left: 8px" @click="TjcgUpLoad">盖章上传</a-button>
                            <input type="file" style="display:none;" class="pointer" id="gzsc" accept=".csv, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" value="上传" @change="handlegzsc"/>
                            <div style="width: 300px;">
                                <a-progress :percent="gzsc_percent" v-show="gzsc_percent_flag"/>
                            </div>
                        </span>
                    </a-col>
                    -->
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <!-- <a-button type="primary" icon="download" @click="handleExportXls('推荐表')">导出Excel</a-button> -->
      <!-- <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button> -->
      <!-- 高级查询区域 -->
      <!-- <j-super-query :fieldList="superFieldList" ref="superQueryModal" @handleSuperQuery="handleSuperQuery"></j-super-query>
            <a-dropdown v-if="selectedRowKeys.length > 0">
                <a-menu slot="overlay">
                    <a-menu-item key="1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item>
                </a-menu>
                <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>
            </a-dropdown> -->
    </div>

    <!-- table区域-begin -->
    <div>
      <!-- <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
                <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
                <a style="margin-left: 24px" @click="onClearSelected">清空</a>
            </div> -->
      <!-- :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" -->
      <a-table tableLayout="auto" ref="table" size="middle" :scroll="{ x: 1275 }" bordered :rowKey='record => record.id'
        :columns="columns" :dataSource="dataSource" :pagination="ipagination" :loading="loading"
        class="j-table-force-nowrap" @change="handleTableChange">
        <!--
                <span slot="cxj_tjzt" slot-scope="text, record">
                    {{record.tjzt}}
                    <img v-if="record.tjztbh!='203'&&record.tjztbh!='202'&&record.tjsj=='ok'" @click="handleEdit(record)" style="width:13px;height:14px;cursor:pointer;" src="../../assets/img/xszt.png" alt="">
                </span>
                -->
        <template slot="xlmc" slot-scope="text, record">
          <a @click="changexlmc(record)">{{ record.xlmc }}</a>
        </template>
        <span slot="action" slot-scope="text, record">
          <a @click="viewDetail(record)">查看</a>
        </span>
      </a-table>
    </div>

    <cxj-tj-tjyj-modal ref="modalForm" @ok="modalFormOk"></cxj-tj-tjyj-modal>
    <cxj-cggl-list-modal ref="modalForm" :expertFlag="expertFlag" :cxj_cxj_id="cxj_cxj_id" :flid="flid" :xlbh="xlbh"
      @update="update"></cxj-cggl-list-modal>
  </a-card>
</template>

<script>

import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
// import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import CxjTjTjyjModal from './modules/CxjTjTjyjModal'
import CxjCgglListModal from './modules/CxjCgglListModal'
import { cxjsbGetSbtjdw } from '@/api/shenbao';
import { getAction } from '@/api/manage';
import { ACCESS_TOKEN } from "@/store/mutation-types"
import moment from 'moment'
import Vue from 'vue'
import {
  exportTjcgXls,
  TjcgUpLoad
} from "@/api/login";
import {
  cxjsbTjdwlist,
  cxjsbSsjtlist,
  cxjsbTjdwlbListAll,
  cxjsbTjdwlistBylb,
  sysCxjFlCxjsbList,
} from "@/api/api"
export default {
  name: 'CxjTjTjyjList',
  // mixins:[JeecgListMixin, mixinDevice],
  mixins: [mixinDevice],
  components: {
    CxjTjTjyjModal,
    CxjCgglListModal
  },
  data() {
    return {
      description: '成果管理页面',
      year: "",
      // 表头
      columns: [
        {
          title: '序号',
          align: "center",
          dataIndex: '',
          width: 60,
          customRender: function (t, r, index) {
            return parseInt(index) + 1;
          }
        },
        {
          title: '成果编号',
          align: "center",
          dataIndex: 'cxj_xmbh',
          // width: 100,
        },
        {
          title: '成果名称',
          dataIndex: 'cxj_mc_zw',
          width: 220,
        },

        {
          title: '成果类别',
          align: "center",
          dataIndex: 'fl_mc',
        },
        {
          title: '成果小类',
          align: "center",
          dataIndex: 'xlmc',
          width: 220,
          scopedSlots: { customRender: 'xlmc' }
        },
        {
          title: '申报单位',
          dataIndex: 'sbdw_qymc',
          width: 150,
        },
        {
          title: '起始时间',
          align: "center",
          dataIndex: 'cxj_qssj',
          // width: 110,
        },
        {
          title: '完成时间',
          align: "center",
          dataIndex: 'cxj_wcsj',
          // width: 110,
        },
        // {
        //     title:'完成人',
        //     dataIndex: 'wcrlist',
        //     width:190,
        // },
        // {
        //     title:'完成单位',
        //     dataIndex: 'wcdwlist',
        //     width:220,
        // },
        {
          title: '项目状态',
          align: "center",
          dataIndex: 'xmzt',
          // width: 90,
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: "center",
          fixed: "right",
          width: 60,
          scopedSlots: { customRender: 'action' }
        }
      ],
      url: {
        // list: "/cxj/cxjCxj/cxjgl_cxjList_gly",
        // 职工类别
        list: "/cxj/cxjCxj/cxjgl_cxjlist_zg",
        delete: "/cxj/cxjTjTjyj/delete",
        deleteBatch: "/cxj/cxjTjTjyj/deleteBatch",
        exportXlsUrl: "/cxj/cxjTjTjyj/exportXls",
        importExcelUrl: "cxj/cxjTjTjyj/importExcel",
        sbdwUrl: '/cxj/cxjSbSbdw/cxjsb_getSbtjdw'
      },
      dictOptions: {},
      superFieldList: [],
      fileStatus: "",
      gzsc_percent_flag: false,
      gzsc_percent: 0,
      // 推荐单位
      recommenderTypeData: [],
      // 所属集团
      groupData: [],
      recommenderData: [],
      yearShowOne: false,
      sbnd: moment(new Date()).format('YYYY'),
      selectedRowKeys: [],
      selectionRows: [],
      queryParam: {},
      loading: false,
      isorter: {
        column: 'createTime',
        order: 'desc',
      },
      dataSource: [],
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条"
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      cxjSbList: [],
      expertFlag: false,
      cxj_cxj_id: '',
      flid: '',
      xlbh: '',
    }
  },
  beforeUpdate() {
    let nowTime = new Date().getTime();
    // let nowTime = 1628946457000;
    this.dataSource.map(item => {
      item.tjsj = 'ok';
      item.type = 'tjdw';
      if (nowTime > item.tj_kssj && nowTime < item.tj_jzsj) {
        item.tjsj = 'ok';
      } else {
        item.tjsj = 'no';
      }
    })
  },
  created() {
    this.$set(this.dictOptions, 'isValid', [{ text: '是', value: 'Y' }, { text: '否', value: 'N' }])
    this.getsysCxjFlCxjsbList();
    this.getSuperFieldList();
    this.getCxjsbTjdwlbList();
    this.getCxjsbSsjtlist();
    this.loadData();
    this.queryParam.sbnd = moment().format('YYYY');
    // this.getCxjsbTjdwlist();
  },
  computed: {
    importExcelUrl: function () {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
    },
  },
  methods: {
    moment,

    getsysCxjFlCxjsbList() {
      sysCxjFlCxjsbList(null).then(res => {
        if (res.success) {
          this.cxjSbList = res.result;
        }
      })
    },
    handleTableChange(pagination, filters, sorter) {
      //分页、排序、筛选变化时触发
      //TODO 筛选
      if (Object.keys(sorter).length > 0) {
        this.isorter.column = sorter.field;
        this.isorter.order = "ascend" == sorter.order ? "asc" : "desc"
      }
      this.ipagination = pagination;
      this.loadData();
    },
    modalFormOk() {
      // 新增/修改 成功时，重载列表
      this.loadData();
      //清空列表选中
      this.onClearSelected()
    },
    onSelectChange(selectedRowKeys, selectionRows) {
      this.selectedRowKeys = selectedRowKeys;
      this.selectionRows = selectionRows;
    },
    onClearSelected() {
      this.selectedRowKeys = [];
      this.selectionRows = [];
    },
    searchQuery() {
      this.loadData(1);
    },

    searchReset() {
      this.queryParam = {};
      this.sbnd = moment(new Date()).format('YYYY');
      this.queryParam.sbnd = this.sbnd;
      this.loadData(1);
    },
    getQueryField() {
      //TODO 字段权限控制
      var str = "id,";
      this.columns.forEach(function (value) {
        str += "," + value.dataIndex;
      });
      return str;
    },
    loadData(arg) {
      /* if (!this.url.list) {
          this.$message.error("请设置url.list属性!")
          return
      } */
      //加载数据 若传入参数1则加载第一页的内容
      if (arg === 1) {
        this.ipagination.current = 1;
      }
      // var params = this.getQueryParams();//查询条件
      this.loading = true;
      this.queryParam.sbnd = this.sbnd;
      let params = Object.assign(this.queryParam, this.isorter, this.filters)
      params.field = this.getQueryField();
      params.pageNo = this.ipagination.current;
      params.pageSize = this.ipagination.pageSize;
      getAction(this.url.list, params).then((res) => {
        if (res.success) {
          //update-begin---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
          this.dataSource = res.result.records || res.result;
          if (res.result.total) {
            this.ipagination.total = res.result.total;
          } else {
            this.ipagination.total = 0;
          }
          //update-end---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
        this.loading = false;
      }).catch(() => {
        this.loading = false
      })
    },
    // 弹出日历和关闭日历的回调
    openChangeOne(status) {
      //status是打开或关闭的状态
      if (status) {
        this.yearShowOne = true
      }
    },
    // 得到年份选择器的值
    onYearChange(value) {
      // let params = this.getQueryParams();//查询条件
      // params.sbnd = moment(value).format('YYYY');
      this.sbnd = moment(value).format('YYYY');
      this.queryParam.sbnd = moment(value).format('YYYY');
      this.yearShowOne = false;
    },

    initDictConfig() { },
    getSuperFieldList() {
      let fieldList = [];
      fieldList.push({ type: 'string', value: 'cxj_xmbh', text: '成果编号', dictCode: '' })
      fieldList.push({ type: 'string', value: 'cxj_mc_zw', text: '成果名称', dictCode: '' })
      fieldList.push({ type: 'string', value: 'fl_id', text: '成果类别', dictCode: '' })
      fieldList.push({ type: 'string', value: 'sbdw_qymc', text: '申报单位', dictCode: '' })
      fieldList.push({ type: 'string', value: 'cxj_qssj', text: '起始时间', dictCode: '' })
      fieldList.push({ type: 'string', value: 'cxj_wcsj', text: '完成时间', dictCode: '' })
      fieldList.push({ type: 'string', value: 'wcrlist', text: '完成人', dictCode: '' })
      fieldList.push({ type: 'string', value: 'wcdwlist', text: '完成单位', dictCode: '' })
      fieldList.push({ type: 'string', value: 'tjzt', text: '推荐状态', dictCode: '' })
      fieldList.push({ type: 'switch', value: 'isValid', text: '是否有效' })
      this.superFieldList = fieldList;
    },
    update() {
      this.loadData();
    },
    changexlmc(item) {
      this.expertFlag = !this.expertFlag;
      this.cxj_cxj_id = item.id;
      this.flid = item.fl_id;
      this.xlbh = item.xlbh;
    },
    viewDetail(item) {
      let token = Vue.ls.get(ACCESS_TOKEN);
      sessionStorage.setItem('token', token);
      let routeData = this.$router.resolve({
        path: '/shenbao/declare',
        query: {
          type: item.fl_id,
          cxj_cxj_id: item.id,
          isHead: 2,
          from: 'gly',
          cxj_xmbh: item.cxj_xmbh,
          cxj_mc_zw: item.cxj_mc_zw
        }
      });
      window.open(routeData.href, '_blank');
    },

    // 获取推荐单位类别列表
    getCxjsbTjdwlbList() {
      cxjsbTjdwlbListAll().then(res => {
        if (res.success) {
          this.recommenderTypeData = res.result;
        }
      })
    },
    handleTjdwlb(val) {
      this.recommenderData = [];
      cxjsbTjdwlistBylb({
        jttjdw_lb: val
      }).then(res => {
        if (res.success) {
          this.recommenderData = res.result;
        }
      })
    },
    // 获取所属集团数据
    getCxjsbSsjtlist() {
      cxjsbSsjtlist().then(res => {
        if (res.success) {
          this.groupData = res.result;
        }
      })
    },
    exportTjcgXls() {
      let that = this;
      exportTjcgXls().then(res => {
        that.downfn('推荐成果汇总表', res);
      })
    },
    TjcgUpLoad() {
      const choosefile = document.querySelector('#gzsc');
      choosefile.click();
    },
    handlegzsc() {
      let that = this;
      that.gzsc_percent = 0;
      that.gzsc_percent_flag = true;
      const files = document.getElementById('gzsc').files[0];
      if (files) {
        // if (files.size > 50*1024*1024) { // 此处判断上传文件的大小 , 单位为 b 故要乘以两个1024
        //     this.$message.warning('文件最大为50兆')
        //     return
        // }
        if (window.FileReader) {
          var fr = new FileReader();
          fr.onprogress = function (e) {
            that.gzsc_percent = (e.loaded / files.size) * 100;
          };
          fr.readAsDataURL(files);
        }
        let formData = new FormData();
        formData.append('file', files);
        TjcgUpLoad(formData).then(res => {
          let data = res.data;
          that.gzsc_percent_flag = false;
          if (res.code == '200') {
            document.getElementById('gzsc').value = null;
            that.$message.success('上传成功');
          } else {
            that.$message.error(data.message);
          }
        }).catch(err => {
          that.gzsc_percent_flag = false;
        })
      }
    },
    downfn(filename, res) {
      var blob = res;
      if (window.navigator.msSaveOrOpenBlob) {
        navigator.msSaveBlob(blob, filename);
      } else {
        var a = document.createElement('a');
        var url = window.URL.createObjectURL(blob);
        a.href = url;
        a.download = filename + '.xls';
        document.body.appendChild(a);
        a.click();
        window.URL.revokeObjectURL(url);
      }
    },
  }
}
</script>
<style scoped lang="less">
@import '~@assets/less/common.less';

.table-operator {
  span {
    color: #252525;
    line-height: 20px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-size: 14px;
    display: inline-block;
    margin-right: 18px;
  }
}

/deep/.ant-table-thead>tr>th .ant-table-header-column {
  width: 100%;
  text-align: center !important;
}

/deep/.ant-table-thead>tr>th {
  font-size: 14px !important;
  padding: 8px 3px !important;
}

/deep/.ant-table-tbody>tr>td {
  word-break: break-all;
  white-space: normal;
  word-wrap: break-word;
  font-size: 14px;
  padding: 3px 3px !important;
}
</style>